<template>
  <div class="search-form">
    <el-form ref="formRef" :model="formData" inline v-bind="$attrs">
      <div class="flex">
        <el-row :gutter="10" class="flex-1">
          <el-col v-bind="item.layout" v-for="item in fileds" :key="item.key">
            <el-form-item v-bind="item.itemProps" class="search-item">
              <template v-if="item.filedType === 'custom'">
                <slot :name="item.key" />
              </template>
              <template v-else>
                <component :is="item.filedType" size="small" v-bind="item.props" clearable v-model="formData[item.key]"
                  @change="handleChange" />
              </template>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="btn">
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleSearch">查询</el-button>
          <el-button icon="el-icon-refresh" type="primary" plain size="mini">重置</el-button>
        </div>
      </div>
    </el-form>
    <el-row>
      <el-col>
        <slot name="operate"></slot>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import Input from "./components/Input.vue"
import Select from "./components/Select.vue"
import DatePicker from "./components/DatePicker.vue"
export default {
  components: { Input, Select, DatePicker },
  props: {
    fileds: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      formData: {},

    }
  },
  methods: {
    handleSearch() {
      this.$emit('onSearch', this.formData)
    },
    handleChange() {
      this.$emit('onSearch', this.formData)
    }
  }
}
</script>
<style lang="scss" scoped>
.search-form {
  padding: 15px;
}

.btn {
  width: 160px;
  margin-top: 5px;
  margin-left: 10px;
}
</style>
